<!--
 * @Author: yyf
 * @Date: 2024年6月26日 11:54:16
 * @LastEditTime: 2024年6月26日 11:54:12
 * @LastEditors: yyf
 * @Description: 系统管理-登录日志
 * @FilePath: \bdcar-net\src\components\views\systemManage\systemUser.vue
-->
<template>
  <div>
    <div class="tablePage" v-loading="tableLoading">
      <div class="search">
        <span class="search-text">账号</span>
        <el-input clearable v-model="query.userName" placeholder="请输入账号" class="search-input"></el-input>

        <span class="search-text">姓名</span>
        <el-input clearable v-model="query.personName" placeholder="请输入姓名" class="search-input"></el-input>

        <span class="search-text">登录时间</span>
        <el-date-picker v-model="searchTimeSpan" :type="'daterange'" range-separator="至" placeholder="请输入时间"
          :picker-options="pickerOptions" class="search-input  dateTime-picker" :format="'yyyy-MM-dd'" :clearable="false"
          :value-format="'yyyy-MM-dd'"></el-date-picker>

        <!-- <el-date-picker v-model="v.value" :type="'datetimerange'" range-separator="至"
          :start-placeholder="v.placeholder[0]" :clearable="false" :end-placeholder="v.placeholder[1]"
          :picker-options="pickerOptions" class="search-input dateTime-picker" :format="'yyyy-MM-dd HH:mm:ss'"
          :value-format="'yyyy-MM-dd HH:mm:ss'">
        </el-date-picker> -->

        <div class="search-btn" @click="getTableData">
          <div class="btn-img"></div>查询
        </div>
      </div>
      <div class="base-table">
        <el-table highlight-current-row :data="tableData" :header-cell-style="{ 'text-align': 'left' }" height="100%">
          <el-table-column v-for="v in tableItems" :key="v.prop" :prop="v.prop" :label="v.name" align="left" 
            header-align="left">
            <template slot-scope="scope">

              <!-- 用户类型赋值 -->
              <span v-if="v.prop == 'roleType'"> {{ getRoleStr(scope.row[v.prop]) }}</span>
              <span v-else-if="scope.row[v.prop] !== ''"> {{ scope.row[v.prop] }}</span>
              <span v-else>---</span>
              <!-- <span>{{ scope.row[v.prop] }}</span> -->

            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination">
        <el-pagination :page-size="pagination.pageSize" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="pagination.currentPage" :total="pagination.total"
          :page-sizes="[15, 50, 100, 300]" background layout="total,sizes, prev, pager, next, jumper"></el-pagination>
      </div>

    </div>
  </div>
</template>
<script>
// -1：管理员   0：普通用户
import Vue from 'vue';
import { service } from "@/services/backServices"
import dayjs from 'dayjs'

export default {
  name: "systemUser",   // 没用？
  data() {

    return {

      //用户类型
      role_options: [
        { label: "普通用户", value: "0" },
        { label: "管理员", value: "-1" },
      ],

      tableLoading: false,
      //表格参数
      pagination: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
      },
      //搜索使用参数
      searchTimeSpan: [dayjs(new Date()).add(-3, 'months').format("YYYY-MM-DD"), dayjs(new Date()).format("YYYY-MM-DD")],

      query: {
        personName: '',
        userName: '',
        startDate:"",
        endDate:"",
      },
      //表格数据
      tableItems: [
        // { name: 'ip', prop: "userIP" },//新增
        { name: '登录时间', prop: "loginTime" },//新增
        { name: '账号', prop: "userName" },
        { name: '姓名', prop: "personName" },
        { name: '用户类型', prop: "roleType" },
      ],
      tableData: [],

      pickerOptions: {
        shortcuts: [
          {
            text: "最近一天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近两天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          }
        ],
        // 禁止点击的时间范围
        disabledDate: (time) => {
          // return time.getTime() > Date.now() - 8.64e7;  //今天不可点
          return time.getTime() > Date.now() ;  //今天可点
        },
      },
    };
  },
  mounted() {
    //初始化表格数据
    this.getTableData();
  },
  methods: {

    // 获取用户类型
    getRoleStr(val) {
      for (let i = 0; i < this.role_options.length; i++) {
        if (val === this.role_options[i].value) return this.role_options[i].label
      }
    },

    object2FormData(obj) {
      const formData = new FormData();
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          formData.append(key, obj[key]);
        }
      }
      return formData;
    },


    //表格参数改变触发
    handleSizeChange: function (val) {
      this.pagination.pageSize = val;
      this.setTableData();
    },
    handleCurrentChange: function (currentPage) {
      this.pagination.currentPage = currentPage;
      this.setTableData();
    },

    setTableData() {
      this.tableData = this.tableAllData.slice(
        (this.pagination.currentPage - 1) * this.pagination.pageSize,
        this.pagination.currentPage * this.pagination.pageSize
      )
    },

    //获取表格数据 核心方法
    getTableData() {
      this.tableLoading = true
      this.query.startDate=this.searchTimeSpan[0]
      this.query.endDate=this.searchTimeSpan[1]
      
      service({
        // url: "searchUsers",//后端接口名称
        url: "loginLog",//后端接口名称
        method: "post",
        // data: this.query
        data: this.object2FormData(this.query)
      }).then((res) => {
        this.tableLoading = false
        if (res.data.code == 200) {
          this.tableAllData = res.data.data;
          this.setTableData();
          this.pagination.total = res.data.data.length;
          if (this.tableData.length == 0 && this.pagination.currentPage != 1) {
            this.pagination.currentPage = 1;
            this.getTableData();
          }
        }
      }).catch((err) => {
        this.tableLoading = false
        this.tableData = []
      });
    },

  },

}
</script>
<style scoped lang="less">
.tree-dom {
  float: right;

  ::v-deep .el-form-item__content {
    width: 240px;
    height: 300px;
    margin-top: 10px;
    overflow-y: auto;
  }
}

::v-deep {
  .search-input {
    width: 220px;
  }

  .el-tree-node__label {
    line-height: 26px;
  }
}
</style>